<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="analysis/empcss.css"/>
		<style type="text/css">
			.hdiv{
				width: 100%;
				background-color: white;
				color: #676664;
			}
			.htop{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			.htop>div{
				width: 40%;
				padding: 0.5em;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.hbot{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 1em;
			}
			.hbleft,.hbright{
				width: 50%;
				text-align: center;
				
			}
			.hbleft{
				border-right: 1px solid #C0C0C0;
			}
			.hbleft>div,.hbright>div{
				padding: 0.5em;
			}
			.content{
				width: 100%;
			}
			.datecss{
				padding: 0.5em;
			}
			.context{
				padding: 0.5em;
				width: 100%;
				background-color: white;
			}
			.ctext{
				position: absolute;
				top: 50%;
				right: 40px;
			    -webkit-transform: translateY(-50%);
			    transform: translateY(-50%);
			}
			
			.mui-btn-block {
    
     margin-bottom: 0px;
    
}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">日常收支</h1>
		</header>
		<div class="mui-content">
			<div class="hdiv">
				<div class="hbot border-b" id="date_typeid">
			    	<div class="hbleft" data-type="date" id="month">
			    		本月
			    	</div>
			    	<div class="hbright" data-type="custom" id="custom">
			    		时间段
			    	</div>
			    </div>
		    <!--
            	作者：592176224@qq.com
            	时间：2019-04-12
            	描述：
           
				<div class="htop">
					<div id="clickid">
					<div id="htime">
						2018-12
					</div>
					<div class="mui-icon mui-icon-arrowdown">
					</div>
					</div>
				</div>
				 -->
				<div class="hbot" id="subtotalid">
					
					<div class="hbleft">
						<div id="">
							收入
						</div>
						<div id="srid">
							￥0
						</div>
					</div>
					<div class="hbright">
						<div id="">
							支出
						</div>
						<div id="zcid">
							￥0
						</div>
					</div>
				</div>
				
			</div>
		    
		    <div class="content">
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-01-22
                	描述：
		    	<div class="datecss">
		    		12-10 星期一
		    	</div>
                -->
		    	<div class="context" id="marklistid">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-22
                    	描述：
		    		<ul class="mui-table-view">
		    		        <li class="mui-table-view-cell" onclick="gopage2()">
		    		            <a class="mui-navigate-right">
		    		                水费
		    		            </a>
		    		            <span class="ctext">
		    		            	10588
		    		            </span>
		    		        </li>
		    		</ul>
                    -->
		    		    
		    		   
		    		
		    	</div>
		    </div>
		     <div class="fgd"></div>
		    <div class="footdiv">
		    	<button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="gopage()">记一笔</button>
		    </div>
		    
		    
		    
		    <div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<div class="mui-input-row borbot" >
						<label>开始时间:</label>
			    		<div class="place items">
						    <button id='starttime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
			    		<div class="place items">
						    <button id='endtime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			   </div>
			</div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var page = 1,
			date_type = "date",
			date_data = "month";
			window.onload = function(){
				mui.init();
				mui.ready(function() {
				//设置开始时间和结束时间选择
				var starttime = document.getElementById('starttime');
                starttime.addEventListener('tap', function(event) {
                	var starttimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01),//设置开始日期   
	                    endDate: new Date(2099, 12, 31),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    starttimePicker.show(function(e) {
                    	 starttime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
                
                var endtime = document.getElementById('endtime');
                endtime.addEventListener('tap', function(event) {
                	var endtimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01),//设置开始日期   
	                    endDate: new Date(2099, 12, 31),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    endtimePicker.show(function(e) {
                    	 endtime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
					
                //htime.innerHTML = getNowFormatDate();
          /*
                 var rightid = document.getElementById('clickid');
                	rightid.addEventListener('tap', function(event) {
                	var timePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01),//设置开始日期   
	                    endDate: new Date(2099, 12, 31),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    timePicker.show(function(e) {
                    	htime.innerHTML = e.y.text+"-"+e.m.text + "-"+e.d.text;
                    	get_income_sort();
                    	
                    });
                }, false);*/
              
            });
	            //本月
	            g("month").addEventListener("tap",function(e){
	            	date_type = "date",
					date_data = "month";
	            	get_income_sort();
	            })
	            //时间段
	            g("custom").addEventListener("tap",function(e){
	            	date_type = "custom",
					date_data = "";
	            	//get_income_sort();
	            	mui('#popover').popover('toggle',g("popover"));
	            })
	            
	            //时间段监听确定
				$("#okbut").on("tap",function(e){
					//var cus = $("#custom");
					//date_type = cus.data("type");
					//tdate = cus.attr('id');
					//cus.addClass("select").siblings().removeClass("select");
					mui('#popover').popover('hide');
					get_income_sort();
				})
	            
	            //获取日常数据
	           	get_income_sort();
			}
			
			//刷新
			function onshow(){
				get_income_sort();
			}
			
			//获取统计和数据列表
			function get_income_sort(){
				var stime = g("starttime").innerHTML||"",
					etime = g("endtime").innerHTML||"";
				var data = {
					url:"/api/income/lst",
					data:{
						access_token:acctoken(),
						date_type:date_type,
						date:date_data,
						start_time:stime,
						end_time:etime,
						page:page,
					}
				}
				ajax(data,function(res){
					console.log("详情",res);
					set_subtotal(res.income_type);
					setmarklist(res.data.data);
				})
				
			}
			//设置列表
			function setmarklist(data){
				var str = '<ul class="mui-table-view">';
				for(var i = 0; i < data.length; i++){
					str += '<li class="mui-table-view-cell" onclick="gopage2('+data[i].id+')">'+
		    		    '<a class="mui-navigate-right">'+
		    		    data[i].name +
		    		    '</a>';
		    		    if(data[i].type == "收入"){
		    		    	str += '<span class="ctext">+' +
		    		    	data[i].money+
		    		   		 '</span></li>';
		    		    }else {
		    		    	str += '<span class="ctext">-' +
		    		    	data[i].money+
		    		   		 '</span></li>';
		    		    }
				}
				str += "</ul>";
				g("marklistid").innerHTML = str;
			}
			
			//设置统计
			function set_subtotal(data){
				var str = '<div class="hbleft"><div id="">'+
					data.in.type+
					'</div><div id="srid">￥'+
					data.in.money+
					'</div></div><div class="hbright"><div id="">'+
					data.out.type+
					'</div><div id="zcid">￥'+
					data.out.money+
					'</div></div>';
				g("subtotalid").innerHTML = str;
					
			}
			
			function gopage2(rid){
				mui.openWindow({
				    url: 'childPages/payment-list.html?rid='+rid, 
				    id: 'payment-list',
				    
				 });
			}
			
			function gopage(){
				mui.openWindow({
				    url: 'mark.html', 
				    id: 'mark'
				 });
			}
		</script>
	</body>

</html>